<template>
  <div class="image-color-picker">
    <div class="color-picker-container">
      <h1>图像拾色器</h1>
      <div class="canvas-container">
        <canvas 
          id="imageCanvas" 
          @click="pickColor"
          :class="{ 'no-image': !hasImage }"
        ></canvas>
        <div v-if="!hasImage" class="upload-hint" @click="uploadImage">
          <el-icon :size="40"><Upload /></el-icon>
          <p>点击上传图片</p>
        </div>
      </div>
      <div class="color-info" v-if="hasImage">
        <div class="color-preview" :style="{ backgroundColor: selectedColor.rgb }">
          <div class="color-value">{{ selectedColor.hex }}</div>
        </div>
        <div class="color-values">
          <div class="color-value">
            <el-input v-model="selectedColor.rgb" readonly>
              <template #prepend>RGB</template>
            </el-input>
          </div>
          <div class="color-value">
            <el-input v-model="selectedColor.hex" readonly>
              <template #prepend>HEX</template>
            </el-input>
          </div>
        </div>
      </div>
      <div class="button-group">
        <el-button type="primary" @click="uploadImage">
          <el-icon><Upload /></el-icon>
          上传
        </el-button>
        <el-button type="success" @click="copyColor" :disabled="!hasImage">
          <el-icon><DocumentCopy /></el-icon>
          复制
        </el-button>
        <el-button type="warning" @click="goToHomepage">
          <el-icon><Back /></el-icon>
          返回
        </el-button>
      </div>
      <input type="file" ref="fileInput" @change="handleFileUpload" accept="image/*" class="hidden-input">
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Upload, DocumentCopy, Back } from '@element-plus/icons-vue'

const router = useRouter()
const fileInput = ref(null)
const canvas = ref(null)
const ctx = ref(null)
const hasImage = ref(false)

const selectedColor = reactive({
  rgb: '',
  hex: ''
})

onMounted(() => {
  canvas.value = document.getElementById('imageCanvas')
  ctx.value = canvas.value.getContext('2d')
})

const uploadImage = () => {
  fileInput.value.click()
}

const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      const img = new Image()
      img.onload = () => {
        canvas.value.width = img.width
        canvas.value.height = img.height
        ctx.value.drawImage(img, 0, 0)
        hasImage.value = true
      }
      img.src = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

const pickColor = (event) => {
  if (!hasImage.value) return
  
  const rect = canvas.value.getBoundingClientRect()
  const scaleX = canvas.value.width / rect.width
  const scaleY = canvas.value.height / rect.height
  
  const x = (event.clientX - rect.left) * scaleX
  const y = (event.clientY - rect.top) * scaleY
  
  const imageData = ctx.value.getImageData(x, y, 1, 1)
  const [r, g, b] = imageData.data
  selectedColor.rgb = `rgb(${r}, ${g}, ${b})`
  selectedColor.hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase()
}

const copyColor = () => {
  navigator.clipboard.writeText(selectedColor.hex)
    .then(() => ElMessage.success('颜色代码已复制到剪贴板'))
    .catch(() => ElMessage.error('复制失败，请手动复制'))
}

const goToHomepage = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.image-color-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;

  .color-picker-container {
    max-width: 800px;
    width: 98%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 25px;
    box-sizing: border-box;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 2.5em;
      margin: 0 0 25px 0;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .canvas-container {
      position: relative;
      width: 100%;
      min-height: 300px;
      border: 2px dashed #ddd;
      border-radius: 8px;
      overflow: hidden;
      background-color: #f8f9fa;

      canvas {
        max-width: 100%;
        height: auto;
        cursor: crosshair;
        display: block;

        &.no-image {
          display: none;
        }
      }

      .upload-hint {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #909399;
        cursor: pointer;

        p {
          margin: 10px 0 0;
          font-size: 14px;
        }
      }
    }

    .color-info {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 20px;

      .color-preview {
        width: 80px;
        height: 80px;
        border: 2px solid #ddd;
        border-radius: 8px;
        position: relative;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }

        .color-value {
          position: absolute;
          bottom: -25px;
          left: 0;
          right: 0;
          text-align: center;
          font-size: 12px;
          color: #666;
        }
      }

      .color-values {
        flex-grow: 1;

        .color-value {
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .button-group {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 30px;

      .el-button {
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        .el-icon {
          margin-right: 6px;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
      }
    }

    .hidden-input {
      display: none;
    }
  }
}

@media (max-width: 480px) {
  .image-color-picker {
    padding: 10px;

    .color-picker-container {
      padding: 15px;

      h1 {
        font-size: 20px;
        margin-bottom: 15px;
      }

      .canvas-container {
        min-height: 200px;
      }

      .color-info {
        flex-direction: column;
        gap: 30px;

        .color-preview {
          width: 60px;
          height: 60px;
        }
      }

      .button-group {
        gap: 8px;

        .el-button {
          flex: 1;
          min-width: 0;
          padding: 8px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
